
   function firstShowMucusChartDetail(){
   		initMucusChartDetailZone();
   		showMucusChartDetail();
   }
   
   function initMucusChartDetailZone(){
   		window.onload = initMucusChartDetailStyle();
   }
   
   function initMucusChartDetailStyle(){
		var mucusChartDetailHeight = Number(window.innerHeight * (1 - mucusChartHeightPercentage)) + Number(chartDelta);
		var mucusChartDetailWidth = window.innerWidth;		
		
		/*设置主体显示div高度*/
		document.getElementById("detail_table").style.width = mucusChartDetailWidth + 'px';
		document.getElementById("detail_table").style.height = mucusChartDetailHeight + 'px';
		document.getElementById("periodDayNum_td").style.width = (mucusChartDetailWidth - mucusChartDetailHeight) / 2 + 'px';
		document.getElementById("periodDayNum_td").style.height = mucusChartDetailHeight + 'px';
		document.getElementById("periodDayTitle_td").style.width = (mucusChartDetailWidth - mucusChartDetailHeight) / 2 + 'px';
		document.getElementById("periodDayTitle_td").style.height = mucusChartDetailHeight + 'px';
		document.getElementById("detail_td").style.width = mucusChartDetailHeight + 'px';
		document.getElementById("detail_td").style.height = mucusChartDetailHeight + 'px';
		document.getElementById("detail_td").style.borderRadius = mucusChartDetailHeight / 2 + 'px';
		
		document.getElementById("heart").style.width = mucusChartDetailHeight / 10 + 'px';
		document.getElementById("moon").style.width = mucusChartDetailHeight / 10 + 'px';
		document.getElementById("drink").style.width = mucusChartDetailHeight / 10 + 'px';
		document.getElementById("medicine").style.width = mucusChartDetailHeight / 10 + 'px';
		document.getElementById("plane").style.width = mucusChartDetailHeight / 10 + 'px';		
   }

   function showMucusChartDetail(){
   	  /*
   		var latestValidDateStr = getLatestValidMucusDateStr(xAxisDateArray.toString());
   		
   		if(latestValidDateStr == "-")
   			latestValidDateStr = getCurrentDateStr();
   	  */
   	    var latestValidDateStr = getCurrentDateStr();
   		var latestValidMucus = customerDateMucusMap.get(latestValidDateStr);
   		showMucusChartDetailForEach(latestValidDateStr, latestValidMucus);
   }

   
   function showMucusChartDetailForEach(detailXAxisDayStr, mucus){   
   		showPeriodDayNum(detailXAxisDayStr);
   		showPeriodDayDetail(detailXAxisDayStr, mucus);
   		showPeriodDayTitleDetail(customerDatePeriodMap.get(detailXAxisDayStr));	    
   }   
   
   function showPeriodDayNum(detailXAxisDayStr){

   		var lang = localStorage.getItem("language");
		var showStr;
		var dayOfCycle = getDaysFromPreviousYjqStartDate(detailXAxisDayStr);

		if(lang == "chinese") showStr = '周期<br>第<span id="periodDayNum" style="font-size:20px;color:#d27ce1">' + dayOfCycle + '</span>天';
		else if(lang == "english") showStr = 'Day-<span id="periodDayNum" style="font-size:20px;color:#d27ce1">' + dayOfCycle + '</span><br>of Cycle';

		document.getElementById('periodDayNum_div').innerHTML = showStr;
   }
   
   
  
   function showPeriodDayDetail(detailXAxisDayStr, mucus){
   		showPeriodDayStateDetail(detailXAxisDayStr);
   		document.getElementById('detailMucus').innerHTML = getDisplayValue(getMucusStr(mucus));
	    document.getElementById('detailDate').innerHTML = getDetailDate(detailXAxisDayStr);
	    document.getElementById('detailDayOfWeek').innerHTML = getDetailDayOfWeek(detailXAxisDayStr);
   }
   
   function showPeriodDayTitleDetail(periodStr){
   		document.getElementById('periodDayTitle').src = setPeriodImageSrc(periodStr);
   }
   
   function getMucusStr(mucus){
	    var mucusStr = "-"; 
		var lang = localStorage.getItem("language");

        if(lang == "chinese"){
			switch(mucus){
				case "1":
					mucusStr = "干燥";
					break;
				case "2":
					mucusStr = "潮湿";
					break;
				case "3":
					mucusStr = "粘稠";
					break;
				case "4":
					mucusStr = "蛋清";
					break;
			}
	   	}else if(lang == "english"){
	   		switch(mucus){
				case "1":
					mucusStr = "Dry";
					break;
				case "2":
					mucusStr = "Wet";
					break;
				case "3":
					mucusStr = "Sticky";
					break;
				case "4":
					mucusStr = "EggWhite";
					break;
			}
	   	}
	   	
	   	return mucusStr;
   }